<template>
  <div>
    <t-card class="list-card-container">
     <t-space>
       <t-button variant="outline" @click="add"><AddIcon/> 新增</t-button>
     </t-space>
      <t-table
        :data="data"
        :columns="TAGS_COLUMNS"
        row-key="id"
        vertical-align="top"
        :hover="true"
        :pagination="pagination"
        :loading="dataLoading"
        :selected-row-keys="selectedRowKeys"
        @page-change="rehandlePageChange"
        @select-change="rehandleSelectChange"
      >
        <template #logLevel="{ row }">
          <t-tag v-if="row.logLevel === 'DEBUG'" theme="primary" variant="light"> DEBUG </t-tag>
          <t-tag v-if="row.logLevel === 'INFO'" theme="primary" variant="light"> INFO </t-tag>
        </template>
        <template #op="slotProps">
          <a class="t-button-link" @click="handleClickDetail(slotProps)">详情</a>
        </template>
      </t-table>
    </t-card>

    <t-dialog
      v-model:visible="confirmVisible"
      header="确定要清空所有记录吗？"
      :body="confirmBody"
      :on-cancel="onCancel"
      @confirm="onConfirmDelete"
    />

  </div>
</template>

<script setup type="ts">
import { ref,reactive,onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import { MessagePlugin } from 'tdesign-vue-next';
import { SearchIcon,LinkIcon,ChevronRightIcon,StarIcon,DeleteIcon,RefreshIcon,AddIcon } from 'tdesign-icons-vue-next';
import { getTagsList } from '@/api/tags';
import { useSettingStore } from '@/store';
import { prefix } from '@/config/global';
import {TAGS_COLUMNS} from './constants'

import { useLocale } from '@/locales/useLocale';
import dayjs from 'dayjs'

const { locale } = useLocale();
const router=useRouter()


const data = ref([]);
const pagination = reactive({
  current: 1,
  pageSize: 20,
  total: 0,
});
const dataLoading = ref(false);
const confirmVisible = ref(false);
const selectedRowKeys = ref([]);
const drawerVisible = ref(false);
const fetchData = async (paginationInfo) => {
  dataLoading.value = true;
  try {
    const {items,totalItems,currentPage}=await getTagsList(paginationInfo);
    data.value = items;
    pagination.total = totalItems;
    pagination.current = currentPage;
  } catch (e) {
    if (e.message) {
      MessagePlugin.error(e.message);
    } else {
      MessagePlugin.error(e.msg);
    }
  } finally {
    dataLoading.value = false;
  }
};
// 刷新数据
const refresh = async () => {
  pagination.current = 1;
  await fetchData(pagination);
};
// 清除日志
const onConfirmDelete = async () => {
  try {
    confirmVisible.value = false;
    await clearSysLog();
    selectedRowKeys.value = [];
    await fetchData(pagination);

    MessagePlugin.success('删除成功');
  } catch (e) {
    console.log(JSON.stringify(e));
  }
};
const clearLog = async () => {
  if (selectedRowKeys.value.length === 0) {
    confirmVisible.value = true;
  } else {
    deleteSysLog(selectedRowKeys.value);
    selectedRowKeys.value = [];
    await fetchData(pagination);

    MessagePlugin.success('删除成功');
  }
};

const rehandlePageChange = (pageInfo) => {
  console.log(`rehandlePageChange${JSON.stringify(pageInfo)}`);
  pagination.current = pageInfo.current;
  pagination.pageSize = pageInfo.pageSize;
  fetchData(pageInfo);
};

const rehandleSelectChange = (val) => {
  selectedRowKeys.value = val;
};
// 详情
const detailInfo = reactive({
  id: '',
  accentColor: '',
  canonicalUrl: '',
  codeinjectionFoot: '',
  codeinjectionHead: '',
  createdAt: '',
  createdBy: '',
  description: '',
  featureImage: '',
  metaDescription: '',
  metaTitle: '',
  name: '',
  ogDescription: '',
  ogImage: '',
  ogTitle: '',
  parentId: '',
  slug: '',
  twitterDescription: '',
  twitterImage: '',
  twitterTitle: '',
  updatedAt: '',
  updatedBy: '',
  visibility: '',
});
const handleClickDetail = (obj) => {
  router.push({
      name:'tagsEdit',
      params:{id:obj.row.id}
    })
};

const add=()=>{
  router.push('/tags/edit')
}
const confirmBody=ref('')
onMounted(async () => {
  await fetchData({
    current: pagination.current,
    pageSize: pagination.pageSize,
  });
});
const onCancel=()=>{}

</script>

<style lang="less" scoped>
</style>




